<template>
  <div class="search-history">
    <van-cell-group>
      <van-cell>
        <span slot="title">搜索历史</span>
        <template slot="right-icon">
          <van-icon name="delete" @click="clean = !clean" v-if="!clean" />
          <div v-else>
            <span @click="allClean">全部删除&nbsp;</span>
            <span @click="clean=!clean"> 完成</span>
          </div>
        </template>
      </van-cell>
      <van-cell  v-for="(item, index) in searchHistoryData" :key='index' :title="item" @click="singleClean(index , item)" >
        <van-icon slot="right-icon" name="cross" v-if="clean"  />
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  props: {
    searchHistoryData: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      clean: false,
    }
  },
  methods : {
      singleClean(index , item){
          this.$emit('cleanSingle', index , item,  this.clean)

      },

      allClean(){
          this.$emit('cleanAll' , this.clean)
      }
  }
}
</script>

<style>
</style>